<template>
	<view class="imagesLayout">
		<view class="content">
			<view class="item" v-for="(item, index) in images" :key="item._id" @click="goDetail(item.wallpaper_id)">
				<image :src="cloudIdToUrl(item.picurl,{w:'200rpx',h:'450rpx'})" mode="aspectFill" class="pic" :class="{ 'loaded': item.isLoaded }" @load="handleImageLoad(item)"></image>
				<view class="date" v-if="query.type">
					<text>{{formatTimeDiff(item.create_time)}}</text>
				</view>
				<view v-if="query.type=='myratings'" class="title">我的评分:{{item.myscore}}</view>
				<!-- 添加删除按钮 -->
				<view v-if="query.type" class="delete-button" @click.stop="deleteImage(index)">
					<text>删除</text>
				</view>
			</view>
		</view>
		<uni-load-more :status="status"></uni-load-more>
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	import { apiGetImageList, apiGetMyDownloads, apiDeleteDownloadRecord, apiGetMyRatings, apiDeleteRatingRecord, apiGetMyFavorites, apiDeleteFavoriteRecord } from '@/api/index.js'
	import { onLoad, onUnload, onReachBottom, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
	import { cloudIdToUrl, formatTimeDiff } from '@/utils/common.js'
	
	const titles = [{key:'mydownloads',value: '我的下载'},{key:'myratings',value: '我的评分'},{key:'myfavorites',value: '我的收藏'}]
	
	const query = {
		classid: '67f4bb8116dfbe360cd8200e',
		name:'',
		pageNum: 1,
		pageSize: 12
	}
	onLoad(e=>{
		query.classid = e.classid || ''
		query.name = e.name || ''
		uni.setNavigationBarTitle({
		    title: e.name || ''
		})
		images.value = []
		if(e.type) {
			query.type = e.type
			const title =  titles.find(item=>item.key==e.type).value || '我的'
			uni.setNavigationBarTitle({
			    title
			})
		} 
		getImages()
	})
	
	// 页面销毁时，清理缓存
	onUnload(e=>{
		uni.removeStorageSync('priviews')
	})
	
	// 通过样式与在数据中增加isLoaded字段，处理图片太大或网络太慢导致有图片未加载问题
	const handleImageLoad = (item) => {
		item.isLoaded = true // 加载完成后更新状态
	}
	
	const status = ref('more')

	const images = ref([])
	const getImages = async () => {
		status.value = 'loading'
		let data = null
		if(query.type) {
			if(query.type == 'mydownloads') data = await apiGetMyDownloads(query,{toLogin:true})
			if(query.type == 'myratings') data = await apiGetMyRatings(query,{toLogin:true})
			if(query.type == 'myfavorites') data = await apiGetMyFavorites(query,{toLogin:true})
		} else {
			data = await apiGetImageList(query)
		}
		
		console.log('data=',data)
		if(data.list.length > 0) {
			let temps = data.list.map(item=>{
				if(!item.wallpaper_id) {
					// 如果是从分类，或者推荐图片进入的images页面，则无wallpaper_id
					item.wallpaper_id = item._id
				}
				return {
					...item,
					isLoaded:false
				}
			})
			images.value = [...images.value, ...temps]
			
			// 存储images数组
			let arrs = images.value.map(item=>{
				return item
			})
			uni.setStorageSync('priviews',arrs)
			
			status.value = 'more'
		} else {
			query.pageNum--
			status.value = 'noMore'
			uni.showToast({
				icon:'error',
				title:'没有更多数据了'
			})
		}
	}
	
	onReachBottom(()=>{
		if(status.value != 'noMore'){
			query.pageNum ++
			getImages()
		}
	})
	
	
	const goDetail = (id)=>{
		uni.navigateTo({
			url:"/pages/preview/preview?id="+id
		})
	}
	
	// 分享给好友
	onShareAppMessage(e=>{
		return {
			title: "咸虾米壁纸-" + query.name,
			path:'/pages/images/images?classid=' + query.classid+'&name='+query.name
		}
	})
	
	// 分享朋友圈
	onShareTimeline(e=>{
		return {
			title: '咸虾米壁纸-' + query.name,
			query: 'classid=' + query.classid+'&name='+query.name
		}
	})
	
	// 删除收藏、下载、评分
	const deleteImage = async (index) => {
		uni.showModal({
			title: '提示',
			content: '确定要删除吗？',
			success: async function (res) {
				if (res.confirm) {
					let res = null
					if(query.type == 'mydownloads') res = await apiDeleteDownloadRecord({id:images.value[index]._id})
					if(query.type == 'myratings') res = await apiDeleteRatingRecord({id:images.value[index]._id})
					if(query.type == 'myfavorites') res = await apiDeleteFavoriteRecord({id:images.value[index]._id})
					
					images.value.splice(index,1)
					uni.showToast({
						icon:'success',
						title:'删除成功'
					})
				} else if (res.cancel) {
					console.log('用户点击取消')
				}
			}
		})
	}
</script>

<style lang="scss" scoped>
.imagesLayout{
	.content{
		padding: 5rpx;
		display: grid;
		row-gap: 5rpx;  // 纵向间距
		column-gap: 5rpx; // 横向间距
		grid-template-columns: repeat(3, 1fr);
		.item{
			position: relative;
			height: 440rpx;
			background: #f0f0f0 no-repeat center;
			.pic{
				height: 100%;
				width: 100%;
				display: block;
			}
			.loaded {
			  opacity: 1;
			  transition: opacity 0.3s;
			}
			.date{
				position: absolute;
				top:0;
				left:0;
				background: rgba(250,129,90,0.7); 
				backdrop-filter: blur(20rpx); /* 磨砂玻璃效果 */
				color: #fff;
				font-size: 22rpx; /* 页面显示的最小是12px，如果小于这个也会按照12px进行，如果还想缩小则需要使用tranform */
				padding: 6rpx 14rpx;
				border-radius: 0 0 20rpx 0;
				transform: scale(0.8); /* 使用tranform改变元素大小 */
				transform-origin: left top;
			}
			.title{
				position: absolute;
				z-index: 2;
				bottom: 0;
				left: 0;
				height: 50rpx;
				line-height: 50rpx;
				width: 100%;
				font-size: 24rpx;
				color: #fff;
				
				display: flex;
				justify-content: center;
				align-items: center;
				
				background-color: rgba(0,0,0,0.2); /* 半透明 */
				backdrop-filter: blur(20rpx); /* 磨砂玻璃效果 */
			}
			// 添加删除按钮的样式
			.delete-button {
				position: absolute;
				top: 0rpx;
				right: 0rpx;
				background-color: rgba(0, 0, 0, 0.5);
				color: white;
				padding: 5rpx 10rpx;
				border-radius: 5rpx;
				font-size: 20rpx;
				cursor: pointer;
			}
		}
		
	}
}
</style>
